var canvas = document.getElementById('timekeeper');
var ctx=canvas.getContext('2d');

bulid()
setInterval(bulid,1000)

//  每次save之后 需要 translate一次

function bulid(){
    ctx.clearRect(0,0,200,300)
    ctx.beginPath()
    ctx.arc(100, 100, 99, 0, 2 * Math.PI, false);
    ctx.stroke()
    
    for (let h = 0; h < 12; h++) { //小时刻度
        ctx.save()
        ctx.translate(100,100)
        ctx.lineWidth = 2
        ctx.lineCap = 'round'
        ctx.rotate(30 * h *Math.PI/180)
        ctx.beginPath()
        ctx.moveTo(0,-99)
        ctx.lineTo(0,-90)
        ctx.stroke()
        ctx.closePath()
        ctx.restore()
    }
    for (let m = 0; m < 60; m++) { //分钟刻度
        ctx.save()
        ctx.translate(100,100)        
        ctx.lineWidth = 1
        ctx.lineCap = 'round'
        ctx.rotate(6 * m *Math.PI/180)
        ctx.beginPath()
        ctx.moveTo(0,-99)
        ctx.lineTo(0,-92)
        ctx.stroke()
        ctx.closePath()
        ctx.restore()
    }

    //刻度
    var deg = 2 * Math.PI / 12
    ctx.save()
    ctx.translate(100,100)
    ctx.beginPath()
    for (let n = 1; n < 13; n++) {
        var x1 = Math.sin(n * deg)
        var y1= -Math.cos(n * deg)
        ctx.fillStyle = 'black'
        ctx.font = 'nurmal 16px Aprial'
        ctx.textAlign = 'center'
        ctx.fillText(n , x1 * 80 , y1 * 80)
    }
    ctx.closePath()
    ctx.restore()

    var currDate = new Date(),
        hours = currDate.getHours(),
        minutes = currDate.getMinutes(),
        seconds = currDate.getSeconds();

    (function(){
        ctx.save()
        ctx.translate(100,100)
        ctx.beginPath()
        // ctx.fillStyle = 'black'
        ctx.font = '16px Arial'
        ctx.textAlign = 'center'
        ctx.fillText('现在时间是：' + (hours < 10 ? '0'+hours:hours) + ':' + (minutes < 10 ? '0'+minutes:minutes)  + ':' + (seconds < 10 ? '0'+seconds : seconds) , 0 , 125)
        ctx.closePath()
        ctx.restore()
    })()
    // 时针
    ctx.save()
    ctx.translate(100,100)
    ctx.rotate( hours * 30 * Math.PI / 180 + minutes / 120 )
    ctx.beginPath()
    ctx.lineWidth = 2
    ctx.lineCap = 'round'
    ctx.moveTo(0, 10)
    ctx.lineTo(0, -40)
    ctx.stroke()
    ctx.closePath()
    ctx.restore()

    // 分针
    ctx.save()
    ctx.translate(100,100)
    ctx.rotate(minutes * 6 * Math.PI / 180)
    ctx.beginPath()
    ctx.lineWidth = 1.5
    ctx.lineCap = 'round'
    ctx.moveTo(0, 10)
    ctx.lineTo(0, -55)
    ctx.strokeStyle = '#f00'
    ctx.stroke()
    ctx.closePath()
    ctx.restore()

    // 秒针
    ctx.save()
    ctx.translate(100,100)
    ctx.rotate(seconds * 6 * Math.PI / 180)
    ctx.beginPath()
    ctx.lineWidth = 1
    ctx.lineCap = 'round'
    ctx.moveTo(0, 10)
    ctx.lineTo(0, -70)
    ctx.strokeStyle = '#62D4D5'
    ctx.stroke()
    ctx.closePath()
    ctx.restore()
}